<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html>
<html>

<head>
<title>首页</title>
<meta charset="utf-8">
<link href="${ctx}/css/framework/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${ctx }/css/index.css">
</head>
<body>
	<c:import url="nav.jsp"></c:import>


	<div class="container">
		<div class="contain">
			<div class="img_left">
				<div id="Carousel_1" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#Carousel_1" data-slide-to="0" class="active"></li>
						<li data-target="#Carousel_1" data-slide-to="1"></li>
						<li data-target="#Carousel_1" data-slide-to="2"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="${ctx}/images/index/ban001.png"
								style="width: 400px; height: 280px">
						</div>
						<div class="item">
							<img src="${ctx}/images/index/ban002.png"
								style="width: 400px; height: 280px">
						</div>
						<div class="item">
							<img src="${ctx}/images/index/ban003.png"
								style="width: 400px; height: 280px">

						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control left" href="#Carousel_1"
						data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
						href="#Carousel_1" data-slide="next">&rsaquo;</a>
				</div>
			</div>
			<div class="img_right">
				<div id="Carousel_2" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#Carousel_2" data-slide-to="0" class="active"></li>
						<li data-target="#Carousel_2" data-slide-to="1"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item">
							<img src="${ctx}/images/index/ban004.png"
								style="width: 400px; height: 280px">
						</div>
						<div class="item active">
							<img src="${ctx}/images/index/ban007.png"
								style="width: 400px; height: 280px">
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control left" href="#Carousel_2"
						data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
						href="#Carousel_2" data-slide="next">&rsaquo;</a>
				</div>
			</div>
			<div class="img_center">
				<div id="Carousel_3" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#Carousel_3" data-slide-to="0" class="active"></li>
						<li data-target="#Carousel_3" data-slide-to="1"></li>
					</ol>


					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item">
							<img src="${ctx}/images/index/ban005.png"
								style="width: 400px; height: 280px">
						</div>
						<div class="item active">
							<img src="${ctx}/images/index/ban006.png"
								style="width: 400px; height: 280px">
						</div>
					</div>

					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control left" href="#Carousel_3"
						data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
						href="#Carousel_3" data-slide="next">&rsaquo;</a>
				</div>
			</div>
		</div>

		<div class="container">


			<h3 class="col-md-offset-5">最新资讯</h3>
			<hr style="border: 1px dashed #000; height: 1px">
		</div>

		<div class="container grey">
			<c:forEach var="match" items="${matchPhotoList}">
				<div class="col-md-3 col-md-offset-0-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<a href="match.html?match_id=${match.match_id }"> <img
								src="${match.cover}" class="img-rounded" width="220px"
								height="200px"></a>
						</div>
						<div class="panel-body main_btn">
							<h3 class="panel-title">${match.match_name}</h3>
						</div>
					</div>
				</div>
			</c:forEach>
		</div>


	</div>
	<c:import url="footer.jsp"></c:import>
	<script src="${ctx }/js/jquery.min.js"></script>
	<script src="${ctx }/js/framework/bootstrap.min.js"></script>
	<script src="${ctx }/js/home_page.js"></script>
	<script type="text/javascript">
		$(function() {

			$("#Carousel_1").carousel('cycle');

			$('#Carousel_1').carousel({
				interval : 2000
			})
			$("#Carousel_2").carousel('cycle');

			$('#Carousel_2').carousel({
				interval : 2000
			})
			$("#Carousel_3").carousel('cycle');

			$('#Carousel_3').carousel({
				interval : 2000
			})
		});
	</script>
</body>

</html>